<template>
	<view :style="{ width: ischeck ? '100%':'50%', }">
		<u-input :class="{newinput:!ischeck}" :value="valueName" :placeholder-style="colordata" disabled type="input" @click="showPicker" :placeholder="placeholder" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				valueName: "",
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: { //id
				type: [String, Number],
				default: '',
				required: true
			},
			disabled: { //是否可选
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: ''
			},
			type: {
				type: [String, Number],
				default: 1, //默认单选 2多选
			},
			uniKey: {  //如果单页面里出现多个组件，通过unikey 来区分数据
				type: [String, Number],
				default: 1,
			},
			ischeck: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: "请选择"
			},
			colordata: {
				type: String,
				default: ""
			},
		},
		watch: {
			name(newData) {
				this.valueName = newData || '';
			}
		},
		methods: {
			showPicker() {
				if(this.disabled) return;
				uni.navigateTo({
					url: `/components/personList/personList?type=${this.type}&key=${this.uniKey}&ids=${this.value}&ischeck=${this.ischeck}`
				})
			},
			savePerson(val) {
				const {
					key,
					data
				} = val;
				if (this.uniKey != key) return;
				//对数据进行解析
				let _ids = [],
					_name = [];
				data.map(item => {
					_ids.push(item.id);
					_name.push(item.name);
				})
				this.valueName = _name.join(',');
				this.$emit('change', _ids.join(','));
				// if(this.ischeck) {
				// 	this.$emit('change', _ids.join(','));
				// } else {
				// 	this.$emit('change', _name.join(','));
				// }
				
			}
		},
		onShow() {
			this.valueName = '';
		},
		mounted() {
			//监听方法数据
			this.valueName = this.name;
			uni.$on('choosePerson', this.savePerson)
		},
		beforeDestroy() {
			//移除监听
			this.valueName = ''
			uni.$off('choosePerson', this.savePerson)
		}
	}
</script>
<style lang="scss" scoped>
	.newinput {
		text-align: center !important;
	}
</style>
